<template>
	
		<view class="myinfo">
			 <view class="info_head u-f">
				 <view class="pic">
						<image :src="userinfo.pic" mode="widthFix"></image>
				 </view>
				 <view class="info u-f">
					 <text style="font-weight: bold;">{{userinfo.name}}</text>
					 <text style="font-size: 22upx;">{{userinfo.qianming}}</text>
				 </view>	
			 </view>
			 <view class="row u-f-ac">
				 <view class="item u-f-ajc" v-for="(item,index) in row" :key="index"
				 :data-index="index" @tap="handleRow">
					 <view style="font-size: 50upx;" :class="item.font"></view>
					 <view style="font-size: 24upx;">{{item.text}}</view>
				 </view>
			 </view>
			 <view class="list">
				 <uni-list>
					 <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="听歌识曲" />
					 <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon2" title="附近的人" />
					 <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon3" title="分享" />
					 <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon4" title="扫一扫" />
					 <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon5" title="浏览" />
				 </uni-list>
			 </view>
			 <view class="bottom u-f-ajc">
				 <view class="item u-f-ajc" v-for="(item,index) in bottom" :key="index"
				 :data-index="index" @tap="hanleBottom">
					 <view :class="item.font"></view>
					 <text style="margin-left: 10upx; mafont-size: 24upx;">{{item.text}}</text>
				 </view>
			 </view>
		</view>
		
</template>

<script>
	import uniList from '../uni-list/uni-list.vue';
	import uniListItem from '../uni-list-item/uni-list-item.vue';
	import { mapState } from 'vuex';
	let audioCtx=uni.getBackgroundAudioManager();
	export default {
		props:{
			userinfo:Object
		},
		components:{
			uniList,
			uniListItem
		},
		computed: {
			...mapState(['Id']),
		},
		data() {
			return {
				row:[
					{
						font:'icon iconfont icon-xiaoxi',
						text:'我的消息'
					},
					{
						font:'icon iconfont icon-user_icon',
						text:'我的好友'
					},
					{
						font:'icon iconfont icon-shouye',
						text:'个人中心'
					}
				],
				extraIcon1: {
					color: '#dd5145',
					size: '22',
					type: 'mic'
				},
				extraIcon2: {
					color: '#dd5145',
					size: '22',
					type: 'location'
				},
				extraIcon3: {
					color: '#dd5145',
					size: '22',
					type: 'paperplane'
				},
				extraIcon4: {
					color: '#dd5145',
					size: '22',
					type: 'scan'
				},
				extraIcon5: {
					color: '#dd5145',
					size: '22',
					type: 'eye'
				},
				bottom:[
					{
						font:'icon iconfont icon-faxian',
						text:'发现'
					},
					{
						font:'icon iconfont icon-shezhi',
						text:'设置'
					},
					{
						font:'icon iconfont icon-guanbi1',
						text:'退出'
					}
				],
			}
		},
		methods: {
			handleRow(e){
				let {index}=e.currentTarget.dataset;
				if(index==2){
					uni.navigateTo({
						url:'../user/user?uid='+this.userinfo.id
					})
				}
			},
			hanleBottom(e){
				let {index}=e.currentTarget.dataset;
				if(index==2){
					uni.showModal({
					    title: '退出登录提醒',
					    content: '您确定要退出登录吗',
					    success: async res =>{
					        if (res.confirm) {
								await this.request({url: this.bsurl+'logout'});
								try {
									uni.clearStorageSync();
									} 
								catch(e){
										console.log(e)
									}	
								if(this.$store.state.Id!==0){
									audioCtx.pause();
								}
								this.$store.commit('setPlayingId', 0)
								uni.reLaunch({
									url:'../login/login'
								})
					        } 
							else if (res.cancel) {
					            console.log('取消');
					        }
					    }
					});
				}
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.myinfo{
		position: relative;
		width: 100%;
		height: 100%;
		.info_head{
			position: absolute;
			top: 100upx;
			left: 25upx;
			.pic{
				width: 80upx;
				margin-right: 20upx;
				image{
					width: 100%;
					border-radius:50%;
				}
			}
			.info{
				flex-direction: column;
			}			
		}
		.row{
			position: absolute;
			top: 200upx;
			left: 0;
			right: 0;
			padding-bottom: 10upx;
			.item{
				flex: 1;
				flex-direction: column;
			}
		}
		.list{
			position: absolute;
			top: 350upx;
			left: 0;
			right: 0;
		}
		.bottom{
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #C0C0C0;
			padding:10upx 0 10upx 0;
			.item{
				flex: 1;
			}
		}
		.bottom>view:nth-of-type(2)
		{
			border-left: 1upx solid #FFFFFF;
			border-right: 1upx solid #FFFFFF;
		}
	}
</style>
